{%extends '../tpl/home-base.html'%}
{%block body%}
<!--=== page header ===-->
<section class="page-header d-flex align-items-center">
    <div class="container-fluid">
        <div class="page-header-content text-center">
            <div class="page-header-tag">标签</div>
            <div class="page-header-title">文章详情</div>
        </div>
    </div>
</section>

<!--=== single blog post ===-->
<section class="blog-home">
    <div class="container-fluid">
        <div class="row">
            <div class="col-15 col-lg-8 mx-auto">
                <div class="post post-card">
                    <div class="single-post-header">
                        <div class="post-tag">发布于：{{data.publishDate}}</div>
                        <h1>{{data.title}}</h1>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="card-details">
                                {{data.detail|safe}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-15 col-lg-8 mx-auto">
                <p>上一篇: <a href="{%if page.prev%} {{page.prev.url}} {%else%}javascript:;{%endif%}">{%if page.prev%} {{page.prev.title}} {%else%}没有了{%endif%}</a></p>
                <p>下一篇: <a href="{%if page.next%} {{page.next.url}} {%else%}javascript:;{%endif%}">{%if page.next%} {{page.next.title}} {%else%}没有了{%endif%}</a></p>
            </div>
        </div>
    </div>

</section>
<!--=== 评论列表 ===-->
<section class="all-comments contact">
    <div class="container-fluid">
        <div class="row">
            <div class="col col-lg-8 mx-auto">
                <div class="comment-posts">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class=""><h2 class="comment-section-title">评论列表</h2></div>

                            <div class="media single-content">
                                <a href="#"><img class=" img-responsive" src="assets/images/team_1.jpg" alt="image"></a>
                                <div class="media-body">
                                    <h3 class="">Jhon Doe | <span>Oct 03, 2016</span></h3>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
                                        minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
                                        aliquip ex ea commodo consequat.

                                    </p>
                                    <div class="media single-content">
                                        <a href="#"><img class=" img-responsive" src="assets/images/team_2.jpg"
                                                         alt="image"></a>
                                        <div class="media-body">
                                            <h3 class="">Jhon Doe | <span>Oct 03, 2016</span></h3>
                                            <p>
                                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                                                nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
                                                volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                                                ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="media single-content">
                                <a href="#"><img class=" img-responsive" src="assets/images/team_3.jpg" alt="image"></a>
                                <div class="media-body">
                                    <h3 class="">Jhon Doe | <span>Oct 03, 2016</span></h3>
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                                        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
                                        minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
                                        aliquip ex ea commodo consequat.
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="border-wrapper"><h2 class="comment-section-title">添加评论</h2></div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label class="sr-only">Your Name</label>
                                <input name="name" class="form-control" placeholder="First Name" type="text">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label class="sr-only">Your Email</label>
                                <input name="email" class="form-control" placeholder="Your Email" type="email">
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <label class="sr-only">Massage</label>
                                <textarea class="form-control textarea" name="message" rows="5"
                                          placeholder="Massage"></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group">
                                <button type="submit" class="btn btn-secondary">Leave a post</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>


{%endblock%}